<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>弹性布局-常见问题(flex layout - frequently asked question)</title>
  <!-- 
  以下是关于CSS的Flex布局常见问题的总结： 
  
  1. 什么是Flex布局？ 
    - Flex布局是一种CSS3的布局方式，用于创建灵活的、自适应的布局结构，使元素能够更好地适应不同屏幕尺寸和设备。 
  
  2. Flex容器和Flex项目有什么区别？ 
    - Flex容器是应用了 display: flex; 或 display: inline-flex; 属性的父元素，用于定义弹性布局的容器。 
    - Flex项目是Flex容器内的子元素，通过设置 flex 属性来控制项目在容器内的布局方式。 
  
  3. 如何设置Flex容器的主轴方向？ 
    - 使用 flex-direction 属性来设置Flex容器的主轴方向，可以选择 row （水平方向）、 row-reverse （水平方向反向）、 column （垂直方向）、 column-reverse （垂直方向反向）。 
  
  4. 如何实现项目在Flex容器中的对齐方式？ 
    - 使用 justify-content 属性来设置项目在主轴上的对齐方式，可以选择 flex-start 、 flex-end 、 center 、 space-between 、 space-around 等。 
    - 使用 align-items 属性来设置项目在交叉轴上的对齐方式，可以选择 flex-start 、 flex-end 、 center 、 baseline 、 stretch 等。 
  
  5. 如何设置项目的放大和缩小比例？ 
    - 使用 flex-grow 属性来设置项目的放大比例，控制项目在剩余空间中的分配比例。 
    - 使用 flex-shrink 属性来设置项目的缩小比例，控制项目在空间不足时的缩小比例。 
    - 使用 flex-basis 属性来设置项目的初始尺寸。
    
  6. 底部部分使用 justify-content: space-between | space-around; item不足列数, 两端排序; 可添加列数 - 2 的盒子宽度弥补
  -->
  <style>
    .display-flex {
      width: 500px;
      height: 500px;
      background-color: #f0f0f0;

      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .display-flex .item {
      width: 100px;
      height: 100px;
      border: 1px solid #000;
    }

    .display-flex > i {
      width: 100px;
    }
  </style>
</head>
<body>
  
  <div class="display-flex">
    <div class="item flex1">1</div>
    <div class="item flex2">2</div>
    <div class="item flex3">3</div>
    <div class="item flex4">4</div>
    <div class="item flex1">1</div>
    <div class="item flex2">2</div>
    <div class="item flex3">3</div>
    <div class="item flex4">4</div>
    <div class="item flex1">1</div>
    <div class="item flex2">2</div>
    <!-- 列数减 2  -->
    <i></i>
    <i></i>
  </div>

  <script src="./js/itemRandomColor.js"></script>

</body>
</html>